<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<l-painter :board="painter" ref="painterView" isCanvasToTempFilePath @success="successPoster" hidden />
	<view class="popularization-box flex-row-center w100">
		<view class="popularization-content flex-row-center">
			<image v-if="promotionBg" :src="promotionBg" class="box-bg" mode="aspectFill"></image>
			<image v-else src="https://cdn.uviewui.com/uview/album/1.jpg" class="box-bg" mode="aspectFill"></image>
			<view class="head-box flex-row-center w100">
				<image :src="userInfo.avatar" class="ava" mode="aspectFill"></image>
				<view class="user-info">
					<text class="name">{{userInfo.nickname}}</text>
					<view class="code-box flex-row-center">
						<text class="code">推广码：{{userInfo.invite_code}}</text>
						<up-icon name="file-text" @click="copycode(userInfo.invite_code)" color="#C8C9C9"
							size="28rpx"></up-icon>
					</view>
				</view>
			</view>
			<view class="footer-box flex-row-center w100">
				<view class="footer-left flex ">
					<!-- <text class="description">扫描二维码，快来加入我们吧！</text> -->
				</view>
				<up-image :show-loading="true" radius="12rpx" :src="codePath" width="184rpx" height="184rpx">
					<template v-slot:loading>
						<up-loading-icon color="red"></up-loading-icon>
					</template>
				</up-image>
			</view>
		</view>
		<view class="bnt-box flex-row-center">
			<button open-type="share" class="scanCode-btn flex-center">
				<up-icon name="weixin-fill" color="#0A534F" size="56rpx"></up-icon>
				<text class="text">分享微信</text>
			</button>

			<view class="loseHand-btn flex-center" @click="savePictures">
				<up-icon name="photo-fill" color="#0A534F" size="56rpx"></up-icon>
				<text class="text">保存图片</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		shareExtendFun
	} from '../../utils/shareExtendFun';
	import {
		savePicturesFun
	} from '@/utils/savePictures.js';
	import {
		configInfoStore
	} from '@/stores/config.js';
	const {
		configInfo
	} = configInfoStore();
	const promotionBg = ref(computed(() => configInfo.promotion_bg?.value));
	const userStore = userInfoStore();
	const userInfo = ref(computed(() => userStore.userInfo));
	const painter = ref(null);
	const codePath = ref('');
	const path = ref('');
	const posterShow = ref(false)
	const painterView = ref(null);
	onLoad(() => {
		getMpCode();
	})
	onMounted(() => {
		uni.$mpShare = {
			title: '推荐您加入我们',
			path: '/pages/login/register?t=1&i=' + userInfo.value.invite_code
		}
	});
	const getMpCode = async () => { //获取推广小程序码
		const res = await $Api.user.getExtendCode();
		if (res.code == 1) {
			codePath.value = filterBase64(res.data.image);
			painter.value = shareExtendFun({
				mainBackground: promotionBg.value||'https://cdn.uviewui.com/uview/album/1.jpg',
				mpCode: codePath.value,
			});
			posterShow.value = true;
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const filterBase64 = (codeImages) => {
		return 'data:image/png;base64,' + codeImages.replace(/[\r\n]/g, "");
	}
	const copycode = (text) => {
		uni.setClipboardData({
			data: text,
			success: function() {
				uni.showToast({
					title: '复制成功'
				})
			}
		});

	}
	const successPoster = (e) => {
		// console.log('图片生成shiba：', e);
		path.value = e
	}
	const savePictures = (url) => { //保存图片
		painterView.value.canvasToTempFilePathSync({
			fileType: "jpg",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			success: (res) => {
				console.log(res.tempFilePath);
				//保存图片
				savePicturesFun(res.tempFilePath)
				// 非H5 保存到相册

			},
		})
	}
	const toshare = () => {}
</script>
<style lang="scss" scoped>
	.poster-img {
		width: 680rpx;
		// min-height: 920rpx;
		border: 1px solid red;
	}

	.popularization-box {
		flex-direction: column;
		height: 100vh;
		padding: 24rpx;

		.popularization-content {
			width: 680rpx;
			margin: 0 auto;
			min-height: 700rpx;
			flex: 1;
			border-radius: 12rpx;
			flex-direction: column;
			box-sizing: border-box;
			justify-content: space-between;
			position: relative;
			overflow: hidden;
			box-shadow: 0rpx 0 20rpx 2rpx rgba(190, 230, 252, 0.3);
			position: relative;



			.head-box {
				width: 100%;
				box-sizing: border-box;
				padding: 24rpx;
				background: linear-gradient(180deg, #0E0F0F 0%, transparent 100%);

				// flex-direction: column;
				.user-info {
					display: flex;
					flex-direction: column;
					height: 100%;
					margin-left: 18rpx;
					justify-content: space-evenly;
				}

				.name {
					font-weight: bold;
					font-size: 38rpx;
					color: #C8C9C9;
				}

				.ava {
					width: 128rpx;
					height: 128rpx;
					// border-radius: 50%;
					border-radius: 16rpx;
				}
			}

			.box-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.footer-box {
				width: 100%;
				justify-content: flex-end;
				// height: 184rpx;
				box-sizing: border-box;
				padding: 24rpx;
				// background: linear-gradient(to top, #0E0F0F 0%, transparent 100%);

				.code-img {
					width: 184rpx;
					height: 184rpx;
					border-radius: 12rpx;
				}
			}

			.footer-left {
				flex-direction: column;
				border-radius: 12rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 18rpx;
			}
		}

		.code {
			font-weight: bold;
			font-size: 26rpx;
			color: #C8C9C9;
			margin-right: 8rpx;
		}

		.description {
			font-weight: 500;
			font-size: 26rpx;
			color: #929495;
			margin-top: 16rpx;
		}

		.bnt-box {
			flex-direction: row;
			justify-content: space-between;
			height: 20vh;
			width: 100%;
		}

		.scanCode-btn {
			width: 45%;
			height: 96rpx;
			background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
			box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 48rpx;
			padding: 0;

			.text {
				font-weight: bold;
				font-size: 30rpx;
				color: #0A534F;
				margin-left: 20rpx;
			}
		}

		.loseHand-btn {
			width: 45%;
			height: 96rpx;
			box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 48rpx;
			border: 2rpx solid rgba(121, 222, 211, 0.87);
			box-sizing: border-box;
			padding-left: 20rpx;

			.loseHand_icon {
				width: 44rpx;
				height: 44rpx;
			}

			.text {
				font-weight: bold;
				font-size: 30rpx;
				color: #6DC5BC;
				margin-left: 20rpx;
			}
		}
	}
</style>